/**
    webpack.config.js webpack的配置文件
        作用：指示 webpack 干那些活（当你运行 webpack 指令时，会加载里面的配置）
        所有构件工具都是基于 nodejs 平台运行的~模块化默认采用 commonjs

    loader： 1、下载    2、使用（配置loader）
    plugins： 1、下载    2、引用    3、使用（配置plugins）
*/

// resolve 用来拼接绝对路径的方法

const { resolve } = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

// html-webpack-plugin
// new htmlWebpackPlugin()   功能：默认会创建一个空的html文件，不会自动引入打包输出的所有资源（js/css）
const htmlPlugin = new htmlWebpackPlugin({
    // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
    template: './src/index.html',
    filename: 'index.html'
});


module.exports = {
    // webpack 配置
    // 入口起点
    entry: './src/index.js',
    // 输出
    output: {
        // 输出文件名
        filename: 'build.js',
        // __dirname 是nodejs的变量，代表当前文件的目录的绝对路径,相当于【./】
        // resolve(__dirname,'build') 方法就相当于将这两个目录拼接起来
        path: resolve(__dirname, 'build')
    },
    // loader 配置
    module: {
        // npm i style-loader css-loader less-loader url-loader file-loader -D
        rules: [
            // 详细的loader配置

            // 处理 css 文件打包的加载器，加载器的顺序不能乱写
            // 加载器是按照顺序调用（从后往前调用，css-loader->style-loader）
            {
                test: /\.css$/,
                use: [
                    'style-loader', // 创建style标签，将js中的样式资源插入进去，添加到head中生效
                    'css-loader', // 将css文件变成 commonjs 模块加载到js中，里面内容是样式字符串
                    // 'postcss-loader' // 是处理兼css的部分兼容问题
                ]
            },
            {
                exclude: /\.(css|js|html)$/,
                loader: 'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        // 详细的plugins的配置
        htmlPlugin
    ],
    mode: 'development', // 开发模式
    // mode: 'production', // 生产模式

    // 开发服务器 devServer ： 用来自动化【自动编译，自动打开浏览器，自动刷新】
    // 只会在内存中编译打包，不会有任何输出
    // 启动devServer指令： npx webpack-dev-server 
    devServer:{
        contentBase:resolve(__dirname,'build'),
        // 启动gzip压缩
        compress:true,
        // 端口号
        port:3000,
        // 自动打开默认浏览器
        open:true
    }
}